<template>
	<view>
		<image :src="imageUrl1"></image>
		<image :src="imageUrl2"></image>
		<image :src="imageUrl3"></image>
	</view>
</template>

<script>
	import { turnScreenWidthWebp, turnWebp, turnWebpWithWidth, turnOneThirdScreenWidthWebp } from '../../utils/img2WebpUtil'
	export default {
		data() {
			return {
				imageUrl1: turnWebp("https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg"),
				imageUrl2: turnScreenWidthWebp("https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg"),
				imageUrl3: turnOneThirdScreenWidthWebp("https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg")
				
			}
		},
		
		onLoad() {
			console.log(this.imageUrl1)
			console.log(this.imageUrl2)
			console.log(this.imageUrl3)
		},
		
		methods: {
			
		}
	}
</script>

<style>

</style>
